<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>添加游记</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="application/x-javascript">addEventListener("load", function() {
		setTimeout(hideURLbar, 0);
	}, false);
	function hideURLbar() {
		window.scrollTo(0, 1);
	}
</script>
<!--flexslider-css-->
<!--bootstrap-->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!--coustom css-->
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!--fonts-->
<link
	href='http://fonts.useso.com/css?family=Open+Sans:400,300,300italic,400italic,800italic,800,700italic,700,600,600italic'
	rel='stylesheet' type='text/css'>
<!--/fonts-->
<!--script-->
<script src="js/jquery.min.js"> </script>
<!-- js -->
<script src="js/bootstrap.js"></script>
<!-- js -->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<!--/script-->
<script type="text/javascript">
	jQuery(document).ready(function($) {
		$(".scroll").click(function(event) {
			event.preventDefault();
			$('html,body').animate({
				scrollTop : $(this.hash).offset().top
			}, 900);
		});
	});
</script>
	
</style>
<script type="text/javascript">
	/* 文件上传失败服务器响应回来的提示 */
	var fileupload_error = "${param.fileupload_error}"
	if (fileupload_error != "") {
		alert("文件上传失败：文件大小不能超过12M,没有上传图片");
	}
	/* 仅仅是预览图片效果 */
	function changepic() {
		// 构造一个文件渲染对象
		var reads = new FileReader();
		// 得到文件列表数组
		var f = document.getElementById('file').files[0];
		// FileReader.readAsDataURL读取指定Blob或File的内容
		reads.readAsDataURL(f);
		// 拿到文件数据
		reads.onload = function(e) {
			// 显示图片
			document.getElementById('img3').src = this.result;
			$("#img3").css("display", "block");
		};
	}
</script>
<!--/script-->

</head>

<body>
	<%@ include file="top.jsp"%>
	<div class="header-banner">
		<!-- Top Navigation -->
		<section class="bgi banner5">
		<h2>Contact</h2>
		</section>
		<!-- contact -->
		<div class="contact-top">
			<!-- container -->
			<div class="container">
				<div class="mail-grids">
					<div class="col-md-6 mail-grid-left">
						<div class="userImage"">
							<img src="#" id="img3" alt="" width="450" height="300"   />
						</div>
					</div>
					<div class="col-md-6 contact-form">

						<form action="AddArticlesServlet" method="post"
							enctype="multipart/form-data">
							<input type="text" placeholder="游记标题" required=""
								name="articleTitle"> <span><iclass ="fa
									fa-user" aria-hidden="true"> </i></span>
							<p name="Articles">${Articles.userId.userName}</p>
							<input type="file" placeholder="图片" required="" name="uphoto"
								style="border: 0px"
								accept="image/jpg,image/jpeg,image/png,image/gif"
								onchange="changepic()" id="file">
							<textarea placeholder="游记内容" required="" name="articleContent"></textarea>
							<input type="submit" value="添加游记" />
						</form>
					</div>
					<div class="clearfix"></div>
				</div>
			</div>
			<!-- //container -->
		</div>
		<!-- //contact -->
	</div>
	</div>



	<%@ include file="buttom.jsp"%>



</body>
</html>
